<template>
  <div class="box">
    <!-- 搜索用户 -->
    <div class="search-box">
      <div>
        <el-input v-model="inputmobile" placeholder="请输入用户手机号" maxlength="11" />
        <el-input v-model="inputName" placeholder="请输入用户昵称" maxlength="6" />
      </div>
      <div class="search-but">
        <el-button type="primary" icon="el-icon-search" @click="searchSubmit()">搜索</el-button>
      </div>
    </div>
    <!-- user列表 -->
    <el-table v-loading="loading" border style="width: 100%" :data="tableData">
      <el-table-column prop="id" label="ID" align="center" />
      <el-table-column prop="username" label="用户昵称" align="center" />
      <el-table-column prop="mobile" label="用户手机" align="center" />
      <el-table-column label="用户状态" align="center">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.status" :active-text="scope.row.status === 1 ? '正常':'停用'" :active-value="1"
            :inactive-value="2" @change="switchChange([scope.row.status,scope.row.id])" />
        </template>
      </el-table-column>
      <el-table-column prop="device_num" label="设备数量" align="center" />
      <!-- <el-table-column prop="on_line" label="设备在线数量" align="center"></el-table-column> -->
      <!-- <el-table-column prop="off_line" label="设备离线数量" align="center"></el-table-column> -->
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="handleDevicelist(scope.$index, scope.row)">查看设备列表</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 设备列表 -->
    <el-dialog width="60%" :title="deviceListTitle" :visible.sync="deviceFormVisible">
      <el-table v-loading="loading" border style="width: 100%" :data="deviceFormVisibleData">
        <el-table-column prop="device_id" label="ID" align="center" />
        <el-table-column prop="device_name" label="设备别名" align="center" />
        <el-table-column prop="device_imei" label="设备编码" align="center" />
        <el-table-column prop="network_card" label="网卡状态" align="center" />
        <el-table-column prop="version" label="固件版本" align="center" />
        <el-table-column prop="is_line" label="在线状态" align="center">
          <template slot-scope="scope">
            <el-tag :type="scope.row.is_line === 1 ? 'success' : 'primary'"
              disable-transitions>{{ scope.row.is_line === 1 ? '在线':'离线' }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="cable" label="设备电量" align="center">
          <template slot-scope="scope">
            {{ power(scope.row.cable) }}%
          </template>
        </el-table-column>
        <el-table-column prop="temp" label="设备温度" align="center">
          <template slot-scope="scope">
            {{ scope.row.temp }}℃
          </template>
        </el-table-column>
        </el-table-column>
        <el-table-column label="操作" align="center" width="180">
          <template slot-scope="scope">
            <el-button size="mini" type="danger" @click="handleUnBinDing(scope.row)">解绑</el-button>
            <el-button size="mini" type="success" @click="clickRow(scope.row)">查看定位</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <!-- 解绑设备确认框"-->
    <el-dialog title="真的要解绑吗？" :visible.sync="unBinDingVisible" width="30%">
      <span>解绑设备会同步清除所有上报数据，确定吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="unBinDingVisible = false">取 消</el-button>
        <el-button type="primary" @click="unBinDingConfirm()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 翻页 -->
    <el-pagination class="pagination" background layout="total,prev, pager, next" :total="total" :page-size="pageSize"
      @current-change="handleCurrentChange" />
  </div>
  </div>
</template>

<script>
  import {
    userList,
    userDeviceList,
    userStatusSwitch,
    deviceLocate,
    unBinding
  } from '@/api/user.js'
  export default {
    name: 'User',
    data() {
      return {
        tableData: [],
        total: 0,
        pageSize: 10,
        currPage: 1,
        loading: true,
        // 搜索
        inputmobile: '',
        inputName: '',
        // 点击行的数据信息
        clickRowData: [],
        // 解绑确认框
        unBinDingVisible: false,
        // 设备列表
        deviceFormVisibleData: [],
        deviceFormVisible: false,
        deviceListTitle: ''
      }
    },
    created() {
      // 列表初始获取
      this.getList(1)
    },
    methods: {
      power(v) {
        let p = ((v - 800) / 240 * 100).toFixed(1);
        if (p <= 0) {
          return 0
        } else if (p >= 100) {
          return 100
        } else {
          return p
        }
      },
      // 列表
      getList(num) {
        this.loading = false
        userList({
          page: this.currPage,
          size: this.pageSize,
          mobile: this.inputmobile,
          name: this.inputName
        }).then(res => {
          // console.log(res.data.total_num)
          this.loading = false
          this.tableData = res.data.list
          this.total = res.data.total_num
        })
      },
      // 当前页改变时触发 跳转其他页
      handleCurrentChange(val) {
        this.currPage = val
        this.getList(val)
      },
      // 当某一行设备被点击时触发
      clickRow(row) {
        // console.log(row)
        var device_id = row.device_id
        deviceLocate({
          device_id: device_id
        }).then((res) => {
          if (res.code == 1) {
            this.$router.push({
              path: '/map/index.vue',
              name: 'Map',
              query: {
                lng: row.lng,
                lat: row.lat,
                itime: res.data.itime,
                gpsinfo: JSON.parse(res.data.trends_data)
              }
            })
          } else {
            this.$message.error(res.message)
          }
        })
      },

      // 查看设备列表
      handleDevicelist(index, row) {
        var id = row.id
        userDeviceList({
          id: id
        }).then(res => {
          this.deviceListTitle = row.username + ' 的设备列表'
          this.deviceFormVisible = true
          this.deviceFormVisibleData = res.data
        })
      },

      // 解绑
      handleUnBinDing(row) {
        var device_id = row.device_id
        this.$confirm('此操作将同步清除所有上报数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          unBinding({
            device_id: device_id
          }).then((res) => {
            if (res.code == 1) {
              this.deviceFormVisible = false
              this.$message.success('解绑成功')
            } else {
              this.$message.error(res.message)
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          })
        })
      },

      // 账号状态开关
      switchChange(e) {
        userStatusSwitch({
          switch: e[0],
          id: e[1]
        }).then((res) => {
          if (res.code == 1) {
            if (e[0] == 2) {
              var msg = '停用成功'
            } else {
              var msg = '放行成功'
            }
            this.$message.success(msg)
          } else {
            this.$message.error(res.msg)
          }
        })
      },

      // 搜索
      searchSubmit() {
        this.loading = false
        userList({
          page: this.currPage,
          size: this.pageSize,
          mobile: this.inputmobile,
          name: this.inputName
        }).then(res => {
          this.loading = false
          this.tableData = res.data.list
          this.total = res.data.total_num
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .box {
    margin: 20px 50px;
  }

  .button,
  .el-input {
    // margin-bottom: 20px;
  }

  .pagination {
    margin-top: 20px;
    text-align: right;
  }

  .search-box {
    display: flex;
    justify-content: flex-end;
  }

  .search-but {
    height: 38px;
  }

  .el-input {
    width: 200px;
    height: 50px;
    margin-right: 10px;
  }
</style>